<ng-template #btnTpl let-i let-btn="btn" let-sub="sub">
  <nz-popconfirm *ngIf="btn.pop" [nzTitle]="btn.popTitle" (nzOnConfirm)="_btnClick(i, btn)">
    <a *ngIf="!sub" nz-popconfirm>
      <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i, btn: btn }"></ng-template>
    </a>
    <span *ngIf="sub" nz-popconfirm>
      <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i, btn: btn }"></ng-template>
    </span>
  </nz-popconfirm>
  <ng-container *ngIf="!btn.pop">
    <a *ngIf="!sub" (click)="_btnClick(i, btn)">
      <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i, btn: btn }"></ng-template>
    </a>
    <span *ngIf="sub" (click)="_btnClick(i, btn)">
      <ng-template [ngTemplateOutlet]="btnTextTpl" [ngTemplateOutletContext]="{ $implicit: i, btn: btn }"></ng-template>
    </span>
  </ng-container>
</ng-template>
<ng-template #btnTextTpl let-i let-btn="btn">
  <ng-container *ngIf="btn.icon">
    <i *ngIf="!btn.icon.iconfont"
      nz-icon [nzType]="btn.icon.type"
      [nzTheme]="btn.icon.theme"
      [nzSpin]="btn.icon.spin"
      [nzTwotoneColor]="btn.icon.twoToneColor"></i>
    <i *ngIf="btn.icon.iconfont" nz-icon [nzIconfont]="btn.icon.iconfont"></i>
  </ng-container>
  <span [innerHTML]="_btnText(i, btn)" [ngClass]="{'pl-xs': btn.icon}"></span>
</ng-template>
<ng-template #bodyTpl let-i let-index="index">
  <tr [attr.data-index]="index" (click)="_rowClick($event, i, index)" [class]="i._rowClassName">
    <td *ngIf="expand" [nzShowExpand]="expand && i.showExpand !== false" [(nzExpand)]="i.expand" (nzExpandChange)="_expandChange(i)"></td>
    <td *ngFor="let c of _columns; let cIdx=index" [nzLeft]="c._left" [nzRight]="c._right"
        [nzCheckbox]="c.type === 'checkbox'" [ngClass]="columnClass(c)" [attr.colspan]="c.colSpan">
      <span class="ant-table-rep__title" [innerHTML]="c.title"></span>
      <span>
        <ng-template #render [ngTemplateOutlet]="c.__render" [ngTemplateOutletContext]="{$implicit: i, index: index, column: c }"></ng-template>
        <ng-container *ngIf="!c.__render; else render">
          <ng-container [ngSwitch]="c.type">
            <label *ngSwitchCase="'checkbox'" nz-checkbox [nzDisabled]="i.disabled" [ngModel]="i.checked"
                   (ngModelChange)="_checkSelection(i, $event)"></label>
            <label *ngSwitchCase="'radio'" nz-radio [nzDisabled]="i.disabled" [ngModel]="i.checked"
                   (ngModelChange)="_refRadio($event, i)"></label>
            <a *ngSwitchCase="'link'" (click)="_click($event, i, c)" [innerHTML]="i._values[cIdx].text"></a>
            <nz-tag *ngSwitchCase="'tag'" [nzColor]="c.tag[i._values[cIdx].text].color">
              {{c.tag[i._values[cIdx].text].text || i._values[cIdx].text}}
            </nz-tag>
            <nz-badge *ngSwitchCase="'badge'"
                      [nzStatus]="c.badge[i._values[cIdx].text].color"
                      [nzText]="c.badge[i._values[cIdx].text].text || i._values[cIdx].text">
            </nz-badge>
            <span *ngSwitchDefault [innerHTML]="i._values[cIdx].text" [attr.title]="isTruncate(c) ? i._values[cIdx].text : null"></span>
          </ng-container>
          <ng-container *ngFor="let btn of _validBtns(c.buttons, i, c); let last=last">
            <nz-dropdown *ngIf="btn.children.length > 0" nzOverlayClassName="st__btn-sub">
              <a nz-dropdown>
                <span [innerHTML]="_btnText(i, btn)"></span>
                <i nz-icon nzType="down"></i>
              </a>
              <ul nz-menu>
                <ng-container *ngFor="let subBtn of _validBtns(btn.children, i, c)">
                  <li nz-menu-item [class.st__btn-disabled]="subBtn._disabled">
                    <ng-template [ngTemplateOutlet]="btnTpl" [ngTemplateOutletContext]="{ $implicit: i, btn: subBtn, sub: true }"></ng-template>
                  </li>
                </ng-container>
              </ul>
            </nz-dropdown>
            <span *ngIf="btn.children.length == 0" [class.st__btn-disabled]="btn._disabled">
              <ng-template [ngTemplateOutlet]="btnTpl" [ngTemplateOutletContext]="{ $implicit: i, btn: btn, sub: false }"></ng-template>
            </span>
            <nz-divider *ngIf="!last" nzType="vertical"></nz-divider>
          </ng-container>
          <ng-template [ngIf]="!c.__renderExpanded" [ngTemplateOutlet]="c.__renderExpanded"
                       [ngTemplateOutletContext]="{$implicit: i, index: index, column: c }"></ng-template>
        </ng-container>
      </span>
    </td>
  </tr>
  <tr [nzExpand]="i.expand">
    <td></td>
    <td [attr.colspan]="_columns.length">
      <ng-template [ngTemplateOutlet]="expand" [ngTemplateOutletContext]="{$implicit: i, index: index }"></ng-template>
    </td>
  </tr>
</ng-template>
<nz-table #table [nzData]="_data" [(nzPageIndex)]="pi" (nzPageIndexChange)="_change('pi')" [(nzPageSize)]="ps"
          (nzPageSizeChange)="_change('ps')" [nzTotal]="total" [nzShowPagination]="_isPagination"
          [nzFrontPagination]="false" [nzBordered]="bordered" [nzSize]="size" [nzLoading]="_loading"
          [nzLoadingDelay]="loadingDelay" [nzLoadingIndicator]="loadingIndicator"
          [nzTitle]="header" [nzFooter]="footer"
          [nzScroll]="scroll" [nzVirtualScroll]="virtualScroll" [nzVirtualItemSize]="virtualItemSize"
          [nzVirtualMaxBufferPx]="virtualMaxBufferPx" [nzVirtualMinBufferPx]="virtualMinBufferPx"
          [nzNoResult]="noResult" [nzPageSizeOptions]="page.pageSizes" [nzShowQuickJumper]="page.showQuickJumper"
          [nzShowSizeChanger]="page.showSize" [nzPaginationPosition]="page.position" [nzShowTotal]="totalTpl">
  <thead class="st__head">
    <tr>
      <th *ngIf="expand" [nzShowExpand]="expand"></th>
      <th *ngFor="let c of _columns; let index=index" [nzWidth]="c.width" [nzLeft]="c._left"
          [nzRight]="c._right" [ngClass]="c.className" [attr.colspan]="c.colSpan" [attr.data-col]="c.indexKey"
          [nzShowSort]="c._sort.enabled" [nzSort]="c._sort.default" (nzSortChange)="sort(c, index, $event)"
          [nzCustomFilter]="c.filter">
        <ng-template #renderTitle [ngTemplateOutlet]="c.__renderTitle" [ngTemplateOutletContext]="{$implicit: c, index: index }"></ng-template>
        <ng-container *ngIf="!c.__renderTitle; else renderTitle">
          <ng-container [ngSwitch]="c.type">
            <ng-container *ngSwitchCase="'checkbox'">
              <label nz-checkbox class="st__checkall" [nzDisabled]="_allCheckedDisabled"
                     [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll()"></label>
              <nz-dropdown *ngIf="c.selections.length" class="st__selection">
                <span nz-dropdown>
                  <i nz-icon nzType="down"></i>
                </span>
                <ul nz-menu>
                  <li nz-menu-item *ngFor="let rw of c.selections" (click)="_rowSelection(rw)" [innerHTML]="rw.text"></li>
                </ul>
              </nz-dropdown>
            </ng-container>
            <span *ngSwitchDefault [innerHTML]="c.title"></span>
          </ng-container>
          <nz-dropdown *ngIf="c.filter" class="st__filter" nzTrigger="click" nzTableFilter [hasFilterButton]="true"
                       [nzClickHide]="false" [(nzVisible)]="c.filter.visible"
                       nzOverlayClassName="st__filter-wrap">
            <i nz-icon [nzType]="c.filter.icon.type" [nzTheme]="c.filter.icon.theme"
              class="ant-table-filter-icon"
              [class.ant-table-filter-selected]="c.filter.default"
              [class.ant-table-filter-open]="c.filter.visible"
              nz-dropdown></i>
            <ng-container [ngSwitch]="c.filter.type">
              <div *ngSwitchCase="'keyword'" class="st__filter-keyword">
                <input type="text" nz-input [attr.placeholder]="c.filter.menus[0].text" [(ngModel)]="c.filter.menus[0].value" />
              </div>
              <ul *ngSwitchDefault nz-menu>
                <ng-container *ngIf="c.filter.multiple">
                  <li nz-menu-item *ngFor="let filter of c.filter.menus">
                    <label nz-checkbox [(ngModel)]="filter.checked">{{filter.text}}</label>
                  </li>
                </ng-container>
                <ng-container *ngIf="!c.filter.multiple">
                  <li nz-menu-item *ngFor="let filter of c.filter.menus">
                    <label nz-radio [ngModel]="filter.checked" (ngModelChange)="_filterRadio(c, filter, $event)">{{filter.text}}</label>
                  </li>
                </ng-container>
              </ul>
            </ng-container>
            <div class="ant-table-filter-dropdown-btns">
              <a class="ant-table-filter-dropdown-link confirm" (click)="c.filter.visible = false">
                <span (click)="_filterConfirm(c)">{{c.filter.confirmText}}</span>
              </a>
              <a class="ant-table-filter-dropdown-link clear" (click)="c.filter.visible = false">
                <span (click)="_filterClear(c)">{{c.filter.clearText}}</span>
              </a>
            </div>
          </nz-dropdown>
        </ng-container>
      </th>
    </tr>
  </thead>
  <tbody class="st__body">
    <ng-container *ngIf="!_loading">
      <ng-template [ngTemplateOutlet]="bodyHeader" [ngTemplateOutletContext]="{$implicit: _statistical }"></ng-template>
    </ng-container>
    <ng-container *ngIf="!virtualScroll">
      <ng-container *ngFor="let i of _data; let index=index">
        <ng-template [ngTemplateOutlet]="bodyTpl" [ngTemplateOutletContext]="{$implicit: i, index: index }"></ng-template>
      </ng-container>
    </ng-container>
    <ng-container *ngIf="virtualScroll">
      <ng-template nz-virtual-scroll let-i let-index="index">
        <ng-template [ngTemplateOutlet]="bodyTpl" [ngTemplateOutletContext]="{$implicit: i, index: index }"></ng-template>
      </ng-template>
    </ng-container>
    <ng-container *ngIf="!_loading">
      <ng-template [ngTemplateOutlet]="body" [ngTemplateOutletContext]="{$implicit: _statistical }"></ng-template>
    </ng-container>
  </tbody>
  <ng-template #totalTpl let-range="range" let-total>{{ renderTotal(total, range) }}</ng-template>
</nz-table>
